<template>
  <view class="task-list">
    <navBar :navbarData.sync="navbarData"></navBar>
    <view class="has-data" v-if="recordList.length>0">
      <view class="container">
        <view class="list-content" v-for="(item,index) in recordList" :key="index">
          <view class="left">
            <view class="time">{{item.date}}</view>
            <view class="from">{{item.name | cutName}}</view>
          </view>
          <view class="right">
            <view class="tick">参与次数<text v-if="item.type==1">+</text><text
                v-if="item.type==2 || item.type==3">-</text>{{item.value}}
            </view>
          </view>
        </view>
      </view>
      <view class="tip">-- 仅显示近1个月的任务记录 --</view>
    </view>
    <view class="empty" v-else>
      <view class="em-container">
        <image src="https://100000063-1252208446.file.myqcloud.com/images/none.png" mode="widthFix"></image>
        <text>您还没有任务记录</text>
      </view>
      <view class="tip">-- 仅显示近1个月的任务记录 --</view>
    </view>
  </view>
</template>

<script>
  import api from '@/api/api';
  import tip from '@/utils/tip';
  import NavBar from '@/components/common/navbar';
  import {
    CUSTOMER_INFO
  } from '@/utils/constant';
  export default {
    components: {
      navBar: NavBar,
    },
    data() {
      return {
        navbarData: {
          showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
          navbarTitle: '任务记录',
          hideSearch: true,
          hideHome: false,
        },
        recordList: []
      }
    },
    onLoad() {
      this.getListInfo()
    },
    filters: {
      cutName(value) {
        return value.replace(/\，/g , `\n`)
      }
    },
    methods: {
      async getListInfo() {
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        const res = await api.getTaskRecord({
          method: 'GET',
          header: {
            jwt: customerInfo.jwt
          },
        });
        if (res.code === 1000) {
          this.recordList = res.data
          this.recordList.map(item => {
            item.date = item.date.replace(/-/g, '.')
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  page,
  .task-list {
    height: 100%;
    width: 100%;
    background: #F6F6F4;
  }

  .container {
    margin: 18rpx 28rpx 40rpx;
    padding: 0 38rpx;
    background: #fff;
    box-shadow: 4px 4px 12px 1px rgba(0, 0, 0, 0.05);

    .list-content {
      display: flex;
      justify-content: space-between;
      height: 176rpx;
      align-items: center;
      border-bottom: 1px solid #E6E6E6;

      &:last-child {
        border: none;
      }

      .left {
        width: 460rpx;

        .time {
          font-size: 28rpx;
          margin-bottom: 15rpx;
        }

        .from {
          font-size: 28rpx;
          white-space:pre-line;
        }
      }

      .tick {
        font-size: 28rpx;
      }
    }
  }

  .tip {
    color: #7D7C7B;
    font-size: 24rpx;
    text-align: center;
    padding-bottom: 40rpx;
  }

  .empty {
    .em-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;

      image {
        width: 140rpx;
        margin: 200rpx auto 40rpx;
      }

      margin-bottom: 320rpx;
    }
  }
</style>
